Spinners

Spinners are CSS loading indicators that should be shown when retrieving data or performing slow computations.

Smalldev ready

Preview

Code

<div class="slds-spinner_container">
  <div class="slds-spinner slds-spinner--small" aria-hidden="false" role="alert">
    <div class="slds-spinner__dot-a"></div>
    <div class="slds-spinner__dot-b"></div>
  </div>
</div>

Mediumdev ready

Preview

Code

<div class="slds-spinner_container">
  <div class="slds-spinner slds-spinner--medium" aria-hidden="false" role="alert">
    <div class="slds-spinner__dot-a"></div>
    <div class="slds-spinner__dot-b"></div>
  </div>
</div>

Largedev ready

Preview

Code

<div class="slds-spinner_container">
  <div class="slds-spinner slds-spinner--large" aria-hidden="false" role="alert">
    <div class="slds-spinner__dot-a"></div>
    <div class="slds-spinner__dot-b"></div>
  </div>
</div>

Brand Smalldev ready

Preview

Code

<div class="slds-spinner_container">
  <div class="slds-spinner--brand slds-spinner slds-spinner--small" aria-hidden="false" role="alert">
    <div class="slds-spinner__dot-a"></div>
    <div class="slds-spinner__dot-b"></div>
  </div>
</div>

Brand Mediumdev ready

Preview

Code

<div class="slds-spinner_container">
  <div class="slds-spinner--brand slds-spinner slds-spinner--medium" aria-hidden="false" role="alert">
    <div class="slds-spinner__dot-a"></div>
    <div class="slds-spinner__dot-b"></div>
  </div>
</div>

Brand Largedev ready

Preview

Code

<div class="slds-spinner_container">
  <div class="slds-spinner--brand slds-spinner slds-spinner--large" aria-hidden="false" role="alert">
    <div class="slds-spinner__dot-a"></div>
    <div class="slds-spinner__dot-b"></div>
  </div>
</div>

Inverse Smalldev ready

Preview

Code

<div class="slds-spinner_container">
  <div class="slds-spinner--inverse slds-spinner slds-spinner--small" aria-hidden="false" role="alert">
    <div class="slds-spinner__dot-a"></div>
    <div class="slds-spinner__dot-b"></div>
  </div>
</div>

Inverse Mediumdev ready

Preview

Code

<div class="slds-spinner_container">
  <div class="slds-spinner--inverse slds-spinner slds-spinner--medium" aria-hidden="false" role="alert">
    <div class="slds-spinner__dot-a"></div>
    <div class="slds-spinner__dot-b"></div>
  </div>
</div>

Inverse Largedev ready

Preview

Code

<div class="slds-spinner_container">
  <div class="slds-spinner--inverse slds-spinner slds-spinner--large" aria-hidden="false" role="alert">
    <div class="slds-spinner__dot-a"></div>
    <div class="slds-spinner__dot-b"></div>
  </div>
</div>

Component Overview

In some cases, the first time a parent component loads, a stencil is preferred to indicate network activity.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to create different scroller looks.
Class NameUsage
.slds-spinner
Applied to:

<div>

Outcome:

This is the gray base class for spinner

Required:

Required

Comments:

--

.slds-spinner_container
Applied to:

outer <div>

Outcome:

This container creates a full overlay to dim the page when needed

Required:

No, optional element or modifier

Comments:

--

.slds-spinner--small
Applied to:

.slds-spinner

Outcome:

This is the small spinner

Required:

No, optional element or modifier

Comments:

--

.slds-spinner--medium
Applied to:

.slds-spinner

Outcome:

This is the medium spinner

Required:

No, optional element or modifier

Comments:

--

.slds-spinner--large
Applied to:

.slds-spinner

Outcome:

This is the large spinner

Required:

No, optional element or modifier

Comments:

--

.slds-spinner--brand
Applied to:

.slds-spinner

Outcome:

This creates the blue brand spinner

Required:

No, optional element or modifier

Comments:

--

.slds-spinner--inverse
Applied to:

.slds-spinner

Outcome:

This is the inverse spinner

Required:

No, optional element or modifier

Comments:

--

.slds-spinner__dot-a
Applied to:

<div>

Outcome:

This creates two of the circles

Required:

Required

Comments:

--

.slds-spinner__dot-b
Applied to:

<div>

Outcome:

This creates two of the circles

Required:

Required

Comments:

--